import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Modal, Form, Input, Select, Button, message } from 'antd';
import { fetchUserInfo, editAdmin } from '@/api/userInfo/index';

const EditAdminDialog = ({ visible, onClose, onSuccess, adminId }) => {
  const [form] = Form.useForm();
  const [formData, setFormData] = useState({
    id: null,
    account: '',
    name: '',
    gender: '',
    email: '',
    department: ''
  });

  const [title] = useState('编辑管理员信息');

  useEffect(() => {
    const getUserInfo = async (id) => {
      if (id) {
        const res = await fetchUserInfo({ id });
        console.log(res)
        form.setFieldsValue({
          ...res,
        })
        setFormData({
          id: res.id,
          account: res.account,
          name: res.name,
          gender: res.gender,
          email: res.email,
          department: res.department
        });
      }
    };
    getUserInfo(adminId);
  }, [adminId]);

  const handleSubmit = async () => {
    try {
      const res = await editAdmin({ ...formData });
      if (res.status === 0) {
        message.success('编辑管理员信息成功');
        onSuccess();
        onClose();
      } else {
        message.error('编辑管理员信息失败');
        onClose();
      }
    } catch (error) {
      console.log(error)
      onClose();
    }
  };

  return (
    <Modal
      title={title}
      open={visible}
      onCancel={onClose}
      footer={null}
      width={600}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={formData}
        onFinish={handleSubmit}
      >
        <Form.Item
          label="账号"
          name="account"
          rules={[{ required: true, message: '请输入管理员的注册账号' }]}
        >
          <Input value={formData.account} disabled />
        </Form.Item>

        <Form.Item
          label="姓名"
          name="name"
          rules={[{ required: true, message: '请输入管理员的名字' }]}
        >
          <Input
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
          />
        </Form.Item>

        <Form.Item
          label="性别"
          name="gender"
          rules={[{ required: true, message: '请输入管理员的性别' }]}
        >
          <Select
            value={formData.gender}
            onChange={(value) => setFormData({ ...formData, gender: value })}
            placeholder="请选择性别"
            options={[
              {
                label: '男',
                value: '男',
              },
              {
                label: '女',
                value: '女',
              }
            ]}
          >
          </Select>
        </Form.Item>

        <Form.Item
          label="邮箱"
          name="email"
          rules={[{ required: true, message: '请输入管理员的邮箱' }]}
        >
          <Input
            value={formData.email}
            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
          />
        </Form.Item>

        <Form.Item
          label="部门"
          name="department"
          rules={[{ required: true, message: '请输入管理员的部门' }]}
        >
          <Select
            value={formData.department}
            onChange={(value) => setFormData({ ...formData, department: value })}
            placeholder="请选择部门"
            options={[
              { value: '产品部', label: '产品部' },
              { value: '用户部', label: '用户部' },
            ]}
          >
          </Select>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" block>
            确定
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

EditAdminDialog.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  onSuccess: PropTypes.func.isRequired,
  adminId: PropTypes.string
};

export default EditAdminDialog;
